<script setup>
import {Search} from "@element-plus/icons-vue";
import {ref,reactive} from "vue";
const name = ref('');
const tableData = reactive([
  {
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  },
  {
    date: '2016-05-04',
    name: '李小龙',
    address: '上海市普陀区金沙江路 1517 弄'
  },
  {
    date: '2016-05-01',
    name: '张大壮',
    address: '上海市普陀区金沙江路 1519 弄'
  },
  {
    date: '2016-05-03',
    name: '赵小燕',
    address: '上海市普陀区金沙江路 1520 弄'
  },
  {
    date: '2016-05-05',
    name: '刘小芳',
    address: '上海市普陀区金沙江路 1521 弄'
  },
  {
    date: '2016-05-06',
    name: '陈小强',
    address: '上海市普陀区金沙江路 1522 弄'
  },
  {
    date: '2016-05-07',
    name: '杨小丽',
    address: '上海市普陀区金沙江路 1523 弄'
  },
  {
    date: '2016-05-08',
    name: '黄小刚',
    address: '上海市普陀区金沙江路 1524 弄'
  },
  // {
  //   date: '2016-05-09',
  //   name: '周小华',
  //   address: '上海市普陀区金沙江路 1525 弄'
  // },
  // {
  //   date: '2016-05-10',
  //   name: '吴小敏',
  //   address: '上海市普陀区金沙江路 1526 弄'
  // },
  // {
  //   date: '2016-05-11',
  //   name: '孙小伟',
  //   address: '上海市普陀区金沙江路 1527 弄'
  // },
  // {
  //   date: '2016-05-12',
  //   name: '胡小兰',
  //   address: '上海市普陀区金沙江路 1528 弄'
  // },
  // {
  //   date: '2016-05-13',
  //   name: '郭小杰',
  //   address: '上海市普陀区金沙江路 1529 弄'
  // },
  // {
  //   date: '2016-05-14',
  //   name: '何小丽',
  //   address: '上海市普陀区金沙江路 1530 弄'
  // },
  // {
  //   date: '2016-05-15',
  //   name: '马小强',
  //   address: '上海市普陀区金沙江路 1531 弄'
  // },
  // {
  //   date: '2016-05-16',
  //   name: '罗小芳',
  //   address: '上海市普陀区金沙江路 1532 弄'
  // },
  // {
  //   date: '2016-05-17',
  //   name: '林小刚',
  //   address: '上海市普陀区金沙江路 1533 弄'
  // },
  // {
  //   date: '2016-05-18',
  //   name: '张小华',
  //   address: '上海市普陀区金沙江路 1534 弄'
  // },
  // {
  //   date: '2016-05-19',
  //   name: '高小敏',
  //   address: '上海市普陀区金沙江路 1535 弄'
  // },
  // {
  //   date: '2016-05-20',
  //   name: '程小伟',
  //   address: '上海市普陀区金沙江路 1536 弄'
  // }

]);
const data = reactive({
  total:  20,
  currentPage :  1,
  pageSize : 10,

})
</script>

<template>
  <div>
<!--    data顶部搜索栏开始-->
    <div class="card" style = "margin-bottom:5px;  display: flex" >
      <el-input placeholder="名称搜索" v-model="name" style = "width:240px; margin-right: 5px" :prefix-icon="Search" />
      <el-button type="primary" :icon="Search" circle></el-button>
      <el-button type="warning">重置</el-button>
    </div>
<!--    data顶部搜索栏结束-->

<!--    data第二栏操作栏开始-->
    <div class="card" style = "margin-bottom: 5px;">
      <el-button type="primary" style = "margin-left: 5px">新增</el-button>
      <el-button type="danger" style = "margin-left: 13px">批量删除</el-button>
      <el-button type="info" style = "margin-left: 13px">导入</el-button>
      <el-button type="success" style = "margin-left: 13px">导出</el-button>
    </div>

<!--    data第二栏操作栏结束-->

<!--    data中部数据表格栏开始-->
    <el-table
        :data="tableData"
        border
        style="width:100%"
        stripe
    >
      <el-table-column
        prop="date"
        label="日期"
      />
      <el-table-column
        prop="name"
        label="姓名"
        />
        <el-table-column
        prop="address"
        label="地址"
        />

      </el-table>
<!--    data中部数据表格栏结束-->

<!--    data底部分页组件开始-->
    <div class ="card" style="margin-top: 5px">
      <el-pagination
       :total = "data.total"
       v-model:current-page="data.currentPage"
       v-model:page-size="data.pageSize"
       :page-sizes="[ 5,10,15,20]"
       layout = "total, sizes, prev, pager, next, jumper"
       background
      />

    </div>
<!--    data底部分页组件结束-->

  </div>

</template>

<style scoped>

</style>